<template>
    <div class="app-container">
        <el-form :show-message="!($route.query.isInfo || isInfo)" ref="elForm" :disabled="$route.query.isInfo || isInfo"
            :model="formData" :rules="rules" size="medium" label-width="150px">
            <h2 style="text-align: center">应急预案评估报告</h2>
            <h4 class="form-header h4">基本信息</h4>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="演练预案" prop="reservePlan">
                        <el-select :disabled="$route.query.isEdit" value-key="safeAccidentDrillItemId" v-model="reservePlan"
                            @change="changeReservePlan" placeholder="请选择演练预案" clearable :style="{ width: '100%' }">
                            <el-option v-for="(item, index) in planList" :key="index" :label="item.reservePlan"
                                :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练时间" prop="planTime">
                        <el-date-picker :disabled="true" v-model="formData.planTime" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" :style="{ width: '100%' }" placeholder="请选择演练时间"
                            clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练方式" prop="styleId">
                        <el-select v-model="formData.styleId" placeholder="请选择演练方式" clearable :style="{ width: '100%' }">
                            <el-option v-for="dict in dict.type.sys_practice_method" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练地点" prop="place">
                        <el-input :disabled="true" v-model="formData.place" placeholder="请输入演练地点" clearable
                            :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练负责人" prop="estimateUserId">
                        <UserDialog :disabled="true" v-model="formData.estimateUserId" @change="changeUserhostId">
                        </UserDialog>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="参加人员" prop="joinUserId">
                        <UserDialogSelection :disabled="true" @change="changeUser" placeholder="请选择参加人员"
                            v-model="formData.joinUserId"></UserDialogSelection>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="评估日期" prop="estimateTime">
                        <el-date-picker v-model="formData.estimateTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{ width: '100%' }" placeholder="请选择演练时间" clearable></el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>
            <!-- <el-col :span="8"> -->
            <el-form-item label="准备物资场地" prop="useMaterial">
                <el-input v-model="formData.useMaterial" placeholder="请输入准备物资场地" clearable type="textarea"
                    :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }">
                </el-input>
            </el-form-item>
            <!-- </el-col> -->
            <el-form-item label="演练过程" prop="process">
                <el-input v-model="formData.process" type="textarea" placeholder="请输入演练过程"
                    :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }"></el-input>
            </el-form-item>

            <h4 class="form-header h4">评价意见</h4>
            <el-row :gutter="15">
                <el-col :span="8">
                    <el-form-item label="开展情况" prop="developmentSituation">
                        <el-input v-model="formData.developmentSituation" placeholder="请输入开展情况" clearable type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="演练效果" prop="exerciseEffect">
                        <el-input v-model="formData.exerciseEffect" placeholder="请输入演练效果" clearable type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="存在问题" prop="existProblem">
                        <el-input v-model="formData.existProblem" placeholder="请输入存在问题" clearable type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="改进方向" prop="improvementDirection">
                        <el-input v-model="formData.improvementDirection" placeholder="请输入改进方向" clearable type="textarea"
                            :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="改进方向" prop="useMaterial">
                        <el-radio-group v-model="formData.conclusion">
                            <el-radio :label="0">基本完成</el-radio>
                            <el-radio :label="1">完成</el-radio>
                            <el-radio :label="2">未能完成预案要求</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-col :span="24">
                <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button :disabled="false" @click="resetForm">返回</el-button>
                </el-form-item>
            </el-col>
        </el-form>
    </div>
</template>
  
<script>
import { deptTreeSelect } from "@/api/system/user";

import {
    safeAccidentDrillItemRecord,
    safeAccidentDrillItemRecordEstimateAdd,
    safeAccidentDrillItemRecordEstimateEdit,
    safeAccidentDrillItemRecordEstimateInfo,
} from "@/api/secure/assessment.js";
// import { selectList as selectListplan } from "@/api/quality/manageAudit/plan.js";
export default {
    components: {},
    dicts: [
        "sys_practice_method"
    ],
    data() {
        return {
            planList: [],
            formData: {
                place: undefined,
                deptId: undefined,
                planTime: null,
                finishDate: null,
                checkUserId: undefined,
                result: undefined,
                remark: undefined,
                reservePlan: undefined,
                conclusion: 1,
            },
            year: '',
            reservePlan: '',
            deptOptions: [],
            deptIdShow: false,
            rules: {
                reservePlan: [
                    {
                        required: true,
                        message: "请选择演练预案",
                        trigger: "change",
                    },
                ],
                place: [
                    {
                        required: true,
                        message: "请输入演练地点",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "请选择责任部门",
                        trigger: "change",
                    },
                ],
                planTime: [
                    {
                        required: true,
                        message: "请选择演练时间",
                        trigger: "change",
                    },
                ],
                finishDate: [
                    {
                        required: true,
                        message: "请选择完成日期",
                        trigger: "change",
                    },
                ],
                checkUserId: [
                    {
                        required: true,
                        message: "请选择验证人",
                        trigger: "blur",
                    },
                ],
                result: [
                    {
                        required: false,
                        message: "请输入验证结果及完成时间",
                        trigger: "blur",
                    },
                ],
                remark: [
                    {
                        required: false,
                        message: "请输入备注",
                        trigger: "blur",
                    },
                ],
            },
            deptName: '',
            deptId: ''
        };
    },
    computed: {},
    watch: {},
    created() {
        this.getDeptTree();
        this.safeAccidentDrillItemRecord()
        // this.getPlan();
    },
    mounted() { },
    methods: {
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
                if (this.$route.query.isEdit || this.$route.query.isInfo || this.isInfo) {
                    this.getinfo();
                }
            });
        },
        safeAccidentDrillItemRecord() {
            safeAccidentDrillItemRecord({ type: 1 }).then((response) => {
                this.planList = response.data;
                console.log(this.planList);
            })
        },
        changeReservePlan(e) {
            console.log(e);
            this.formData = e
            this.$set(this.formData, 'estimateUserId', e.leaderId)
            this.$set(this.formData, 'joinUserId', e.joinUserId.split(',').map(Number))
            this.$set(this.formData, 'joinUserName', e.joinUserName.split(','))
            // this.formData.useMaterial = e.prepareWork
            this.formData.estimateUserName = e.leaderName
            console.log(this.formData);
            this.$forceUpdate()
        },
        changeUser(e) {
            console.log(e);
            let idList = []
            let nameList = []
            e.forEach((i) => {
                idList.push(i.userId)
                nameList.push(i.nickName)
            });
            console.log(idList, 'idList');
            this.formData.joinUserId = idList.toString()
            this.formData.joinUserName = nameList.toString()
        },
        changeCascader(e) {
            console.log(this.$refs.reference.getCheckedNodes());
            let arr = this.$refs.reference.getCheckedNodes()
            let list = []
            let label = []
            arr.forEach((item, index) => {
                list.push(item.value)
                label.push(item.label)
                console.log(item.value);
            })
            console.log(list);
            this.deptIdStringValue = list.toString()
            this.deptIdStringLabel = label.toString()
            console.log(this.deptIdStringValue, this.deptIdStringLabel);
            this.deptIdShow = true

        },
        visibleChange(e) {
        },
        changeUserhostId() { },
        getinfo() {
            safeAccidentDrillItemRecordEstimateInfo(this.$route.query.id || this.id).then((response) => {
                this.formData = response.data;
                this.reservePlan = this.formData.reservePlan
            });
        },
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    let query = JSON.parse(JSON.stringify(this.formData));
                    query.styleLabel = this.dict.type.sys_practice_method.find(
                        i => i.value === query.styleId
                    ).label;
                    query.joinUserId = query.joinUserId.toString()
                    query.joinUserName = query.joinUserName.toString()
                    if (this.formData.safeAccidentDrillItemRecordEstimateId != undefined) {
                        safeAccidentDrillItemRecordEstimateEdit(query).then((response) => {
                            this.$modal.msgSuccess("修改成功");
                            this.resetForm();
                        });
                    } else {
                        safeAccidentDrillItemRecordEstimateAdd(query).then((response) => {
                            this.$modal.msgSuccess("新增成功");
                            this.resetForm();
                        });
                    }
                }
            });
        },
        resetForm() {
            this.$tab.closeOpenPage();
        },
    },
};
</script>
  